<!DOCTYPE html>
<html>
 <head>
  <title>WattDepot Oscar Charts</title>
  <script type='text/javascript' src='http://www.google.com/jsapi'></script>
  <script type='text/javascript'>
   // Load the Visualization API and Annotated Timeline visualization
   google.load('visualization', '1', {'packages':['annotatedtimeline']});
   
   // Set a callback to run when the API is loaded.
   google.setOnLoadCallback(init);
   
   //// Creating separate callback methods seems pretty bogus, but my Javascript
   //// skillz are lacking. Even better would be to gather up the data tables
   //// and merge them into one chart widget
   
   // Send the query to the data source.
   function init() {
    var queryHPOWER = new google.visualization.Query('http://localhost:8184/gviz/sources/SIM_HPOWER');
    queryHPOWER.setQuery('select timePoint, powerGenerated');
    queryHPOWER.send(handleQueryResponseHPOWER);
    var queryAES = new google.visualization.Query('http://localhost:8184/gviz/sources/SIM_AES');
    queryAES.setQuery('select timePoint, powerGenerated');
    queryAES.send(handleQueryResponseAES);
    var queryWAIAU9 = new google.visualization.Query('http://localhost:8184/gviz/sources/SIM_WAIAU_9');
    queryWAIAU9.setQuery('select timePoint, powerGenerated');
    queryWAIAU9.send(handleQueryResponseWAIAU9);
   }
   
  // Handle the query response.
  function handleQueryResponseHPOWER(response) {
   if (response.isError()) {
    alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
    return;
   }

   // Draw the visualization.
   var dataHPOWER = response.getDataTable();
   var chartHPOWER = new google.visualization.AnnotatedTimeLine(document.getElementById('HPOWER_div'));
   chartHPOWER.draw(dataHPOWER, {displayAnnotations: false});
  }
  
  function handleQueryResponseAES(response) {
   if (response.isError()) {
    alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
    return;
   }

   // Draw the visualization.
   var dataAES = response.getDataTable();
   var chartAES = new google.visualization.AnnotatedTimeLine(document.getElementById('AES_div'));
   chartAES.draw(dataAES, {displayAnnotations: false});
  }
  
  function handleQueryResponseWAIAU9(response) {
   if (response.isError()) {
    alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
    return;
   }

   // Draw the visualization.
   var dataWAIAU9 = response.getDataTable();
   var chartWAIAU9 = new google.visualization.AnnotatedTimeLine(document.getElementById('WAIAU9_div'));
   chartWAIAU9.draw(dataWAIAU9, {displayAnnotations: false});
  }

  </script>
 </head>

 <body>
  <h1>WattDepot Oscar Charts</h1>
  A chart that shows data generated by <a href="http://code.google.com/p/oscar-project/">OSCAR</a>.
  <p></p>
  <h2>HPOWER output</h2>
  <div id='HPOWER_div' style='width: 700px; height: 240px;'></div>
  <h2>AES output</h2>
  <div id='AES_div' style='width: 700px; height: 240px;'></div>
  <h2>Waiau 9 output</h2>
  <div id='WAIAU9_div' style='width: 700px; height: 240px;'></div>
 </body>
</html>